<template>
	<view class="">
		
		
		<view :style="{height:windowHeight}" v-if="noticeList.length==0"
			style="display: flex;align-items: center;justify-content: center;">
			<view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<image :src="no_data" style="width: 300rpx;height: 300rpx;"></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<text style="font-weight: 400;color: #333333;font-size: 28rpx;">暂无数据</text>
				</view>
			</view>
		</view>
		
		<view :style="{height:windowHeight}" style="padding-left: 32rpx;padding-right: 32rpx;" v-if="noticeList.length>0">
			<view v-for="(item,index) in noticeList" :key="index" @click="noticeDetail(item,index)">
				<view class="item">
					<view style="display: flex;align-items: center;margin-top: 24rpx;">
						<text class="item-d" v-if="item.status.code=='0'"></text>
						<text class="item-t">{{item.title}}</text>
						
					</view>
					<view class="item-tt">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-sl" @click="remind">
					订阅提醒
				</view>
				<view class="view-bottom-sr" @click="read">
					全部已读
				</view>
			</view>
			<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
				<!-- 苹果x及以上的安全距离 -->
			<!-- </view> -->
			
		</view>
	</view>
</template>

<script>
	let app = ''
	export default{
		data(){
			return{
				role:'',
				roleUrl: '',
				windowHeight:0,
				needAdapt: false, //判断是不是苹果x以上机型
				page:1,
				total:0,
				noticeList:[],
				tag:1,
				no_data:getApp().globalData.baseImageUrl+'/no-data.png',
			}
		},
		onLoad() {
			app = getApp()
			var _this = this
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			if(_this.needAdapt){
				_this.windowHeight = (app.globalData.windowHeight -88)*2 + 'rpx'
			}else{
				_this.windowHeight = (app.globalData.windowHeight -54)*2 + 'rpx'
			}
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			
		},
		onShow() {
			if(this.tag===1){
				this.getList()
			}
			
		},
		mounted() {
			
		},
		
		onPullDownRefresh(){
			console.log('下拉刷新')
			this.page = 1
			this.noticeList = []
			this.getList()
		},
		onReachBottom() {
			console.log('底部')
			if(this.noticeList.length===this.total){
				uni.showToast({
					icon:'none',
					title:'暂无更多'
				})
			}else{
				this.page = this.page+1
				this.getList()
			}
			
		},
		
		methods:{
			
			async getList(){
				var _this = this
				uni.showLoading({
					title:'正在加载...'
				})
				let data={
					page:_this.page,
					size:10
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/notice/list`,
					method: 'POST',
					data:data
				})
				uni.hideLoading()
				console.log('查看消息',res)
				if(res.data.code==200){
					if(_this.page===1){
						_this.total = res.data.data.total
					}
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						
						_this.noticeList.push(list[i])
					}
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}
			},
			
			/**
			 * 查看详情
			 */
			async noticeDetail(val,index){
				console.log(val)
				let _this = this
				let list = _this.noticeList
				for (var i = 0; i < list.length; i++) {
					if(i==index){
						list[i]['status']['code'] = '1'
						list[i]['status']['desc'] = '已读'
					}
					
				}
				_this.noticeList = list
				_this.tag = 2
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/notice/${val.id}`,
				})
				console.log('详情',res)
			},
			/**
			 * 点击了订阅提醒
			 */
			remind(){
				console.log('')
			},
			/**
			 * 点击了全部已读
			 */
			async read(){
				let _this = this
				let list = _this.noticeList
				let ids = []
				if(list.length===0){
					uni.showToast({
						title:'暂无消息',
						icon:"none"
					})
					return
				}
				for (var i = 0; i < list.length; i++) {
					ids.push(list[i]['id'])
				}
				let data={
					ids:ids
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/notice`,
					method: 'PUT',
					data:data
				})
				console.log('标记已读',res)
				if(res.data.code==200){
					for (var i = 0; i < list.length; i++) {
						list[i]['status']['code'] = '1'
						list[i]['status']['desc'] = '已读'
					}
					_this.noticeList = list
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}
				
			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e1e1e1;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	
	.view-bottom-sl{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		margin-left: 32rpx;
	}
	.view-bottom-sr{
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #E8F7FB;
		margin-left: 32rpx;
	}
	
	.item{
		height: 138rpx;
		border-bottom: 1rpx solid #EEEEEE;
		
	}
	.item-d{
		width: 8rpx;
		height: 8rpx;
		background: #FF6132;
		border-radius: 8rpx;
		margin-right:8rpx
	}
	.item-t{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.item-tt{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top:16rpx
	}
</style>